<template>
  <li class="accordion-item">
    <img :src="src" alt="" />

    <p
      :style="{
        fontSize: fontSize == '' ? '' : fontSize + 'px',
        color: fontColor == '' ? '' : fontColor,
        height: height == '' ? '' : height + 'px',
        display: notShowTitle ? 'none' : 'block',
        lineHeight: titleCenter ? height + 'px' : '',
        ...hoverStyles,
      }"
      @mouseover="setHover(true)"
      @mouseout="setHover(false)"
    >
      {{ title }}
    </p>
  </li>
</template>
<script lang="ts">
export default {
  //组件名称
  name: "ls-accordion-item",
};
</script>

<script lang="ts" setup>
import { withDefaults, ref } from "vue";
interface Props {
  src?: string; // 图片路径
  title?: string; // 图片名字
  link?: string; // 跳转路径
  fontSize?: number | string;
  fontColor?: string;
  hoverBGColor?: number | string;
  hoverHeight?: number | string;
  height?: number | string;
  hoverFontSize?: number | string;
  hoverFontColor?: number | string;
  notShowTitle?: boolean;
  titleCenter?: boolean;
}
/* 设置默认值 */
const props = withDefaults(defineProps<Props>(), {
  src: "",
  title: "", // 图片名字

  fontSize: "",
  fontColor: "",
  hoverBGColor: "",
  hoverHeight: "",
  height: "100",
  hoverFontSize: "",
  hoverFontColor: "",
  notShowTitle: false,
  titleCenter: false,
});
const isHovered = ref<any>(false);
const hoverStyles = ref<any>({});
const setHover = (Hovered: any) => {
  isHovered.value = Hovered;
  if (isHovered.value) {
    hoverStyles.value = {
      background: props.hoverBGColor == "" ? "" : props.hoverBGColor,
      color: props.hoverFontColor == "" ? "" : props.hoverFontColor,
      fontSize: props.hoverFontSize == "" ? "" : props.hoverFontSize + "px",
      height: props.hoverHeight == "" ? "" : props.hoverHeight + "px",
      lineHeight: props.titleCenter ? props.hoverHeight + "px" : "",
    };
  } else {
    hoverStyles.value = {};
  }
};
</script>

<style lang="scss" scoped>
.accordion-item {
  height: 100%;
  position: relative;
  float: left;
  list-style-type: none;
  /* 过渡为0.5秒 */
  transition: all 0.5s;
  list-style-type: none; //去掉标签默认的左边符号

  p {
    /* 绝对定位 */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-weight: 700;
    /* 文字遮罩层 */
    background-color: rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    padding-top: 10px;
  }
}
</style>
